<template>
  <div class="detail">
    <div class="back" @click="goBack">fanhui</div>
    <van-swipe style="height: 100vh;" vertical :show-indicators="false" :autoplay="'false'" lazy-render>
      <van-swipe-item v-for="item in pageList" :key="item.id">
        <PubVideo class="detail-video" :id="item.id" :config="item.videoConfig" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, watchEffect  } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Toast } from 'vant'
import PubVideo from '@/components/pub-video/index'

export default {
  name: 'Detail',
  components: {
    PubVideo
  },
  setup() {
    const route = useRoute()
    const state = reactive({
      videoDetailId: route.query.from || '1',
      pageList: []
    })

    const getPageData = async (query) => {
      const { data } = await getVideoDetail(query)
      if (!data) {
        state.pageList = []
        goBack()
        return
      }
      state.pageList = data.list.map((el, index) => {
        return {
          id: 'video' + index,
          videoConfig: {
            video: el.link,
            poster: el.poster
          }
        }
      })
    }

    const getVideoDetail = () => {
      return {
        code: 200,
        data: {
          list: [{
            poster: '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
            // link: 'http://dlhls.cdn.zhanqi.tv/zqlive/22578_yKdJM.m3u8'
            link: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
            // link: 'https://www.bilibili.com/video/BV1CZ4y1z7Mf.m3u8'
            // link: 'http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8'
            // link: 'https://v26-web.douyinvod.com/a6855ed0c1be16ec3f81aafaa7deadd2/62358182/video/tos/cn/tos-cn-ve-15-alinc2/7b325d7a2377420e8d3880b76c48d46a/?a=6383&br=1163&bt=1163&cd=0%7C0%7C0%7C0&ch=5&cr=0&cs=0&cv=1&dr=0&ds=3&er=&ft=5q_lc5mmnPkC2Xt7HhWwkXAGfdH.CvJGVbZc&l=202203191405340101590451440B4F7CCB&lr=all&mime_type=video_mp4&net=0&pl=0&qs=0&rc=amoza2k6ZjN1OjMzNGkzM0ApN2k3aTY3ZDtmNzo7ZjY1aWdlYDU0cjRnbG1gLS1kLTBzczExYjJhX2EuLmMzNTBjNTU6Yw%3D%3D&vl=&vr='
            // link: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'
          }, {
            poster: '//d302.paixin.com/thumbs/2712843/141887850/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
            link: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
          }, {
            poster: '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
            link: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
          }]
        }
      }
    }

    const router = useRouter()
    const goBack = () => {
      Toast.clear()
      Toast(`无操作权限\n请前往 ‘我的’ 充值开通会员`)
      router.go(0)
    }

    onMounted(async () => {
      watchEffect(() => {
        getPageData({
          id: state.videoDetailId
        })
      })
    })

    return {
      ...toRefs(state),
      goBack
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-video {
  height: 100vh;
}
.back {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  z-index: 1;
}
</style>